<template>
	<view class="content">
		<view class="top">
			<view :style="{ paddingTop: topheight,height:navheight,lineHeight:navheight }" class="nav">
				<image @click="back" src="../../static/img/left.png" mode="widthFix"></image>
				<view>贷款统计</view>
			</view>
		</view>
		<view class="info info2">
			<view class="title">
				<text></text>还款统计
			</view>
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, i) in list" :index="i">
					<view class="grid-item-box" @click="repay(i)">
						<view class="">{{item.title}}</view>
						<text class="text" :class="{'color_red':i<3}">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="info">
			<view class="title">
				<text></text>坏账统计
			</view>
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, i) in list2" :index="i">
					<view class="grid-item-box">
						<view class="">{{item.title}}</view>
						<text class="text" :class="{'color_red':i>0}">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="info">
			<view class="title">
				<text></text>对账统计
			</view>
			<uni-grid :column="3" :highlight="true" @change="record()" >
				<uni-grid-item v-for="(item, i) in list3" :index="i">
					<view class="grid-item-box">
						<view class="">{{item.title}}</view>
						<text class="text color_red">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import {
		loansStatistics
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				list: [{
						title: '总借款额',
						text: '￥0.00'
					},
					{
						title: '已还本金',
						text: '￥0.00'
					},
					{
						title: '已还利息',
						text: '￥0.00'
					},
					{
						title: '总借款人数',
						text: '0'
					},
					{
						title: '待还本金',
						text: '0'
					},
					{
						title: '待还利息',
						text: '0'
					},
				],
				list2: [{
						title: '坏账期数',
						text: '0'
					},
					{
						title: '坏账金额',
						text: '￥0.00'
					},
					{
						title: '优惠金额',
						text: '￥0.00'
					},
				],
				list3: [{
						title: '已还本金',
						text: '￥0.00'
					},
					{
						title: '已还利息',
						text: '￥0.00'
					},
					{
						title: '额外收益',
						text: '￥0.00'
					},
				],
				info: ''
			}
		},
		onLoad() {
			this.select()
		},
		methods: {
			change() {},
			record() {
				uni.navigateTo({
					url: '/pages/me/topupRecord'
				})
			},
			back() {
				uni.navigateBack()
			},
			repay(e) {
				if (e == 0) {
					uni.navigateTo({
						url: '/pages/me/repay'
					})
				}else if (e == 2) {
					uni.navigateTo({
						url: '/pages/me/record'
					})
				}else if (e == 3) {
					uni.navigateTo({
						url: '/pages/me/client'
					})
				}
			},
			select() {
				loansStatistics().then(res => {
					console.log(res);
					if (res.code == 200) {

					}
					var info = res.data
					this.list[0].text = info.self_money
					this.list[1].text = info.true_self_money
					this.list[2].text = info.true_interest_money

					this.list[3].text = info.success_jie
					this.list[4].text = info.dai_self_money
					this.list[5].text = info.dai_interest_money

					this.list2[0].text = info.hui_count
					this.list2[1].text = info.hui_money
					this.list2[2].text = info.you_money

					this.list3[0].text = info.yihuan_self_money
					this.list3[1].text = info.yihuan_interest
					this.list3[2].text = info.other_money
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		overflow: hidden;
	}

	.top {
		width: 100vw;
		height: 280rpx;
		background: url('../../static/img/loans_bg.png') no-repeat;
		background-size: cover;
	}

	.nav {
		width: 100vw;
		position: relative;
		// background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 22;

		image {
			width: 16rpx;
			// height: 40rpx;
			position: absolute;
			bottom: 20rpx;
			left: 30rpx;
		}

		view {
			text-align: center;
			font-size: 31rpx;
		}
	}

	.info2 {
		margin-top: -70rpx !important;
	}

	.info {
		margin: 0 30rpx 40rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;

		.title {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 32rpx;
			margin: 30rpx;

			text {
				width: 6rpx;
				height: 28rpx;
				background: #FF534E;
				border-radius: 2rpx;
				margin-right: 16rpx;
			}
		}

		&:nth-child(3) .title text {
			background: #EDA023;
		}

		&:nth-child(4) .title text {
			background: #509AFA;
		}

		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;

			text {
				color: #FF534E;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

		.color_red {
			color: #FF534E;
		}

		/deep/ .uni-grid-item--border {
			border: none;
		}

		/deep/ .uni-grid--border {
			border: none;
		}

		/deep/ .uni-grid-item {
			height: 160rpx !important;
			// background-color: #FF534E !important;
		}
	}
</style>